<template>
    <div class="d-flex a-center" style="height: 100%">
        <div style="margin-right: 30px">
            <div class="rot1"></div>
            <div class="rot2"></div>
            <div class="bkg"></div>
            <div class="txt">
                <div class="text-bold" style="font-size: 1.5rem">书刊总数</div>
                <div style="font-size: 1.2rem">{{pops.data.allBorrowBookNums}}</div>
            </div>
        </div>
        <div class="f1">
            <div class="square" style="margin-top: 20px;">
                <div>
                    <div class="r"></div>
                    <div class="i">
                        <img alt="" class="--icon" src="../assets/ver3/circle-icon1.svg"/>
                    </div>
                </div>
<!--                <div class="v">-->
<!--                    <div class="">今日借阅</div>-->
<!--                    <div class="text-bold text-point text-center">{{pops.data.todayBorrowNums}}</div>-->
<!--                </div>-->
                <div class="v">
                    <div class="">在馆数量</div>
                    <div class="text-bold text-point text-center">{{pops.data.nowInRoomBookNums}}</div>
                </div>
            </div>
            <div class="square">
                <div>
                    <div class="r"></div>
                    <div class="i">
                        <img alt="" class="--icon" src="../assets/ver3/circle-icon2.svg"/>
                    </div>
                </div>
<!--                <div class="v">-->
<!--                    <div class="">本月借阅</div>-->
<!--                    <div class="text-bold text-point text-center">{{pops.data.monthBorrowBookNums}}</div>-->
<!--                </div>-->
                <div class="v">
                    <div class="">借阅数量</div>
                    <div class="text-bold text-point text-center">{{pops.data.nowBorrowBookNums}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, watch,defineProps,onMounted,nextTick } from 'vue'
    const pops = defineProps({
        data:Object
    })
</script>

<style scoped>

.square{
    display: flex;
    align-items: center;
    margin:10px;
    background-image: url("../assets/ver3/circle-background.png");
    background-repeat:  no-repeat;
    background-size: contain;
    height: 90px;
}
.square:first-child{
    margin-bottom: 20px!important;
}
.square .r{
    background-image:url("../assets/ver3/circle3.png");
    background-repeat:  no-repeat;
    background-size: contain;
    height:50px;
    width:50px;
    animation: rotateAnimation 5s linear infinite;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -5px;
}
.square .v{
    color:white;
    margin-top: 5px;
}
.square .--icon{
    display: block;
    width:30px;
    height: 30px;
}
.square .i{
    width:30px;
    height: 30px;
    margin-top: -40px;
    margin-left: 20px;
}
.bkg{
    background-image:url("../assets/ver3/circle1.png");
    background-repeat:  no-repeat;
    background-size: contain;
    height:300px;
    width:300px;
    margin-top: -260px;
    margin-left: 35px;
}
.txt{
    height:340px;
    width:340px;
    margin-top: -320px;
    margin-left:15px;
    text-align: center;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.rot1{
    background-image:url("../assets/ver3/circle4.png");
    background-repeat:  no-repeat;
    background-size: contain;
    animation: rotateAnimation 13s linear infinite;
    height:350px;
    width:350px;
    margin-top: 5px;
    margin-left:10px;
}
.rot2{
    background-image:url("../assets/ver3/circle2.png");
    background-repeat:  no-repeat;
    background-size: contain;
    animation: rotateAnimation 5s linear infinite;
    height:220px;
    width:220px;
    margin:-285px 10px 0 75px;
}
@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>